<template>
  <div id="app">
    <div class="data" v-if="show">
      <img src="../assets/icon/没有数据.svg" alt="" />
    </div>
    <div class="text" v-if="mes">
      <div
        v-for="(item, index) in message"
        :key="index"
        class="mes"
        @click="getIndex(index)"
      >
        <div class="top">
          <h4 class="p1">
            <img src="../assets/icon/房屋租售.svg" alt="" />{{ item.inp1 }}
          </h4>
          <p class="p2">{{ item.inp2 }}</p>
          <p class="p3">{{ item.v }}</p>
        </div>
        <div class="bottom">
          <p class="left">{{ item.c1 }}{{ item.c2 }}{{ item.c3 }}</p>
          <p class="right">{{ item.r }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
 
 
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["message"]),
  },
  data() {
    return {
      show: true,
      mes: false,
    };
  },
  methods: {
    getIndex(i) {
      console.log(i);
    },
  },
  created() {
    // console.log(this.message);
    if (this.message.length > 0) {
      this.show = false;
      this.mes = true;
    }
  },
};
</script>
<style lang="scss" scoped>
#app {
  background-color: #f0f0f0;
  width: 100%;
  height: 100%;
  // opacity: .8;
  position: fixed;
  top: 70px;
  left: 0;
  font-size: 16px;
  .text {
    // padding-top: 20px;
    width: 100%;
    // height: 100px;
    background-color: white;
    margin: 0 auto;
    .top {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      h4 {
        margin-top: 16px;
        img {
          width: 18px;
          margin-right: 2px;
          padding-top: 2px;
        }
      }

      .p3 {
        text-align: center;
        width: 50px;
        background-color: #e2f5f0;
        color: #50aa8e;
      }
      .p2 {
        color: gray;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
    .mes {
      border-bottom: 1px solid rgb(228, 226, 226);
      margin-top: 2px;
    }
  }

  .data {
    position: fixed;
    top: 35%;
    left: 32%;
    // background-color: white;

    img {
      width: 150px;
    }
    p {
      margin-left: 45px;
      color: #5477ef;
    }
  }
}
</style>